<script setup lang="ts">
import { ref, unref, reactive, computed } from 'vue'
import { useGameStore } from '@/stores/game'
import { useInvestStore } from '@/stores/invest'
import { getRuleDoc } from '@/api'
import { Tabs, Tab, Loading } from 'vant'

const investStore = useInvestStore()

const gameStore = useGameStore()

const gameList = computed(() => gameStore.gameList)

const getAllGame = computed(() => gameStore.allGame)

const showRule = ref(false)

const currentGame = ref(gameStore.currentGame)

const activeTab = ref(0)

const docs = reactive({
  playDoc: '',
  oddDoc: '',
})

const getActiveGame = (lotteryCode) => {
  const code = lotteryCode ?? unref(currentGame)
  if (!code) return
  currentGame.value = code
  getRuleDetail()
}

const getRuleDetail = async () => {
  docs.playDoc = ''
  docs.oddDoc = ''
  try {
    const {
      data: { playDoc, oddDoc },
    } = await getRuleDoc({ lotteryCode: unref(currentGame) })
    docs.playDoc = playDoc
    docs.oddDoc = oddDoc
  } catch (err) {
    console.log(err)
  }
}

const openRulesPopup = () => {
  getActiveGame(null)
  showRule.value = true
}

const closeRulesPopup = () => {
  showRule.value = false
  investStore.setRules(false)
}

const selectRef = ref()

const showMenu = ref(false)

const selectGame = (item) => {
  getActiveGame(item.lotteryCode)
  showMenu.value = false
}

const toggleSort = () => {
  showMenu.value = !showMenu.value
}

const closePopupOnClickOutside = (event) => {
  if (selectRef.value !== undefined) {
    const el = selectRef.value
    if (!(el === event.target || el.contains(event.target))) {
      showMenu.value = false
    }
  }
}

defineExpose({ openRulesPopup })
</script>
<template>
  <div v-if="showRule" class="overlay">
    <div class="wrapper" @click.stop>
      <div class="container">
        <div class="frameInner">
          <Tabs v-model:active="activeTab" swipeable>
            <Tab title="玩法说明">
              <div v-if="docs.playDoc" v-html="docs.playDoc" class="shell"></div>
              <Loading v-else class="loading" />
            </Tab>
            <Tab title="游戏赔率">
              <div v-if="docs.oddDoc" v-html="docs.oddDoc" class="shell"></div>
              <Loading v-else class="loading" />
            </Tab>
          </Tabs>
        </div>
        <div class="sort">
          <div @click="toggleSort" :class="{ convert: showMenu }" class="currentGame all-center" ref="selectRef">
            {{ getAllGame[currentGame]?.['lotteryName'] }}
          </div>
          <div class="dropList" :class="{ open: showRule }" v-if="showMenu" v-click-outside="closePopupOnClickOutside">
            <div
              class="li"
              v-for="(item, key) in gameList"
              @click="selectGame(item)"
              :key="key"
              :class="currentGame === item.lotteryCode && 'active'"
            >
              {{ item.lotteryName }}
            </div>
          </div>
        </div>
      </div>
      <img @click="closeRulesPopup" class="close" src="@/assets/img/rules/rules.png" alt="" />
    </div>
  </div>
</template>

<style scoped lang="less">
.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
}
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .container {
    width: 340px;
    height: 506px;
    border-radius: 15px;
    background: linear-gradient(0deg, #1e2136, #1e2136), linear-gradient(0deg, #41445e, #41445e);
    box-shadow: 0 1px 0 0 #1b1e30;
    border: 0.5px solid #41445e;
    position: relative;
    padding: 14px 0 14px 16px;
    box-sizing: border-box;
    .sort {
      width: 102px;
      height: 30px;
      position: absolute;
      top: 14px;
      right: 14px;
      .currentGame {
        width: 100%;
        height: 100%;
        background: #655ae3;
        background: linear-gradient(0deg, #272c5d, #272c5d), linear-gradient(0deg, #42498d, #42498d);
        border: 0.5px solid #474f9d;
        border-radius: 3px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding-right: 18px;
        box-sizing: border-box;
        &:after {
          display: block;
          content: '';
          width: 9px;
          height: 5px;
          background: url('@/assets/img/record/icon-show.png');
          background-size: 100% 100%;
          transform: rotate(0deg);
          position: absolute;
          right: 8px;
          box-sizing: border-box;
          transition: all 0.1s;
        }
      }
      .convert {
        background: #655ae3;
        border: 0.5px solid #655ae3;
        &:after {
          transform: rotate(180deg);
        }
      }
      .dropList {
        position: absolute;
        left: 0;
        top: 30px;
        color: #b5bcff;
        border-radius: 3px;
        width: calc(100% - 1px);
        background: linear-gradient(0deg, #272c5d, #272c5d), linear-gradient(0deg, #42498d, #42498d);
        border: 0.5px solid #42498d;
        box-shadow: 0 0 4px 0 #24050540;
        &.open {
          animation: drop 0.1s ease-in;
          -webkit-animation: drop 0.1s ease-in;
          -moz-animation: drop 0.1s ease-in;
          @keyframes drop {
            0% {
              opacity: 0;
              transform: translateY(-10px);
            }
            100% {
              opacity: 1;
              transform: translateY(0);
            }
          }
        }
        .li {
          height: 38px;
          font-size: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .active {
          background: #655ae3;
          color: #fff;
        }
        .li:first-child {
          border-top-right-radius: 4px;
          border-top-left-radius: 4px;
        }
        .li:last-child {
          border-bottom-right-radius: 4px;
          border-bottom-left-radius: 4px;
        }
      }
    }
  }
  .close {
    width: 40px;
    margin-top: 35px;
    box-sizing: border-box;
  }
}

:deep(.van-tabs) {
  padding-top: 45px;
  box-sizing: border-box;
}
:deep(.van-tabs__wrap) {
  width: 50%;
  height: 30px;
  position: absolute;
  top: 0;
  left: -10px;
  z-index: 222;
  .van-tabs__nav {
    background: none;
  }
  .van-tab {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #667ab8;
  }
  .van-tab--active {
    color: #7c67ff;
  }
  .van-tabs__line {
    width: 23.26px;
    font-weight: 500;
    height: 2px;
    border-radius: 4px;
    background: #7c67ff;
  }
}
:deep(.van-tabs) {
  height: 100%;
}
:deep(.van-tabs__content) {
  height: 100%;
}
:deep(.van-tab__panel) {
  height: calc(100% - 30px);
  overflow-y: scroll;
}

:deep(.frameInner) {
  height: inherit;
  text-align: left;
  .shell {
    width: 100%;
    padding-right: 16px;
    box-sizing: border-box;
    color: #CDCDF9;
    img {
      max-width: 100%;
    }
  }
  .loading {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
